<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style type="text/css">
			.mui-slider {
				margin-top: .88rem;
			}

			.menu {
				display: flex;
				justify-content: space-around;
				margin: .26rem auto .1rem;
			}

			.menu .item {
				width: 44%;
				height: 3rem;
				background-color: #47a9e2;
				border-radius: .1rem;
			}

			.menu .item p {
				text-align: center;
				color: #fff;
				line-height: 3rem;
				font-size: 18px;

			}

			.menu .item:first-child {
				background: linear-gradient(180deg, #941AE6, #F1E0FC);
				background: -webkit-gradient(180deg, #941AE6, #F1E0FC);
			}

			.menu .item:last-child {
				background: linear-gradient(#3370CC, #CEE1FD);
				background: -webkit-gradient(#3370CC, #CEE1FD);
			}

			.title {
				border-bottom: .02rem solid #bbb;
				padding-top: .1rem;
				padding-bottom: .3rem;
				margin: .24rem auto;
				padding-left: .2rem;
			}

			.mui-navigate-right:after,
			.mui-push-right:after {
				display: none;
			}

			#app {
				position: relative;
			}

			.mui-scroll-wrapper {
				position: static;
			}
		</style>
	</head>

	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">榜单</h1>
		</header>
		<!-- 轮播图 -->
		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/slide3.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/slide1.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/slide2.jpg">
					</a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/slide3.jpg">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/slide1.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<!-- 榜单top250 -->
		<div id="menu" class="menu">
			<div id="top250" class="item">
				<p>豆瓣Top250</p>
			</div>
			<div id="usrank" class="item">
				<p>北美排行榜</p>
			</div>

		</div>
		<!-- 即将上映 -->
		<h4 class="title">即将上映</h4>
		<!-- 下拉刷新 -->
		<div id="app">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-media" v-for="(val,index) in movies" :key="index" @tap="seeDetail(val.id)">
							<a class="mui-navigate-right">
								<img class="mui-media-object mui-pull-left" :src="val.images.large">
								<div class="mui-media-body">
									{{val.title}}
									<p class='mui-ellipsis'>剧情/战争 <span>{{val.rating.average}}分</span></p>
									<p class='mui-ellipsis'>导演：{{val.directors2}}</p>
									<p class='mui-ellipsis'>主演：{{val.casts2}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript" charset="utf-8">
			// // 实例化plus
			// let top250View;
			// mui.plusReady(function() {
			// 	top250View = plus.webview.getWebviewById('topView'); // 详细页的窗口对象
			// 	if (!top250View) {
			// 		console.log(1);
			// 		// 预加载页面
			// 		top250View = mui.preload({ // 【预加载】自动创建了窗口，加载了文件
			// 			url: '../pages/top250.html',
			// 			id: 'topView' // 这个也是webview的id
			// 		})
			// 	}
			// });
			
			let moviesDeatil;
			mui.plusReady(function() {
			
				moviesDeatil = plus.webview.getWebviewById('mDeatil'); // 详细页的窗口对象
				if (!moviesDeatil) {
					console.log(1);
					// 预加载页面
					moviesDeatil = mui.preload({ // 【预加载】自动创建了窗口，加载了文件
						url: '../pages/moviesDeatil.html',
						id: 'mDeatil' // 这个也是webview的id
					})
				}
			});
			//实例化vue对象
			let APP = new Vue({
				el: '#app',
				data: {
					// 电影列表
					movies: [],
					pn: 1
				},
				methods: {
					seeDetail(id) {
							console.log(id);
							// mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
							mui.fire(moviesDeatil, 'getMovie', {
								mid: id
							})
					
							// mui 提供打开窗口的方法
							mui.openWindow({ // 打开窗口之前
								// url: '../pages/moviesDeatil.html'
								id: 'mDeatil'
							});
						}
					
					}
			});

			mui.init({
				swipeBack: true, //启用右滑关闭功能
				//启用上拉下拉刷新
				pullRefresh: {
					container: '#pullrefresh', //获取作用的对象
					//往下拉刷新
					down: {
						auto: false,
						style: 'circle',
						callback: pulldownRefresh
					},
					//往上拉更新
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						contentnomore: '已经到底了...',
						callback: pullupRefresh
					}
				}
			});
			//'https://api.douban.com/v2/movie/coming_soon',//豆瓣
			// http://t.yushu.im/v2/movie/coming_soon，//其他的
			function pullupRefresh() {
				console.log("执行上拉刷新\n");
				mui.getJSON(
					'http://t.yushu.im/v2/movie/coming_soon', {
						start: (APP.pn - 1) * 10, // 起始记录的下标，第1页第1条记录是 0
						count: 10, // 每页显示的条数
						city: '广州',
						apikey: '0df993c66c0c636e29ecbb5344252a4a'
					},
					function(data) { //json对象
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(data));
						// 总数据数量
						let total = data.total; //获取到的电影总数

						let subjects = data.subjects; //接受返回的包含所有电影的对象（数组）
						if (subjects.length > 0) {

							// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
							let directors; //导演
							let casts; //主演
							subjects.map(function(v) {

								// 剧情
								v.genres = v.genres.join('/');

								// 导演名称
								directors = v.directors;
								let arr = [];
								directors.forEach(function(vv) {
									// 数组追加
									arr.push(vv.name); //  ["管虎","xxx"]
								});
								// 增加多一个导演下标
								v.directors2 = arr.join('/');
								// 演员名称
								casts = v.casts;
								let arr2 = [];
								casts.forEach(function(vvv) {
									arr2.push(vvv.name);
								})
								// 增加多一个演员下标
								v.casts2 = arr2.join('/');
								return v;
							})

							// console.log(JSON.stringify(subjects));


							// 赋值
							APP.movies = APP.movies.concat(subjects);
							// console.log(JSON.stringify(APP.movies))
							// APP.movies = subjects;
							// 页码加1
							APP.pn = APP.pn + 1;
							// 允许上拉加载
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length >= total ? true : false);
						}
					},
					function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					});

			}
			/**
			 * 下拉刷新具体业务实现（加载更多）
			 */
			function pulldownRefresh() {
				console.log("执行下拉刷新")
				// 允许上拉加载
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false);

				// 重置页码为1
				APP.pn = 1;

				// 更改数组，清空数组
				APP.movies = [];

				// 调用上拉加载函数
				pullupRefresh();

			}
			
			//top250
			mui("#menu").on('tap', '#top250', function() {
				//传值给详情页面，通知加载新数据
				// mui.fire(top250, 'getTop250', {});
				// //打开新闻详情
				// alert(1)
				mui.openWindow({
					id: 'top250',
					url: '../pages/top250.html'
				});
			});
			
			//北美票房榜
			mui("#menu").on('tap', '#usrank', function() {
				//传值给详情页面，通知加载新数据
				// mui.fire(top250, 'getTop250', {});
				// //打开新闻详情
				// alert(1)
				mui.openWindow({
					id: 'usrank',
					url: '../pages/usrank.html'
				});
			});


			// mui("#top250").addEventListener("tap",)
			// 		//轮播图
			// 		var slider = mui("#slider");
			// 		slider.slider({
			// 			interval:3000
			// 		});
		</script>
	</body>

</html>
